<template>
  <div id="opinion" class="opinion">
    <div class="ad-wrap" v-if="adImg.length">
      <img :src="adImg">
    </div>

    <div class="condition-wrap">
      <div class="condition-row">
        <span class="condition-cell" :class="{ 'selected-cell': selectedSens.indexOf(item.value)!==-1 }" @click="changeSensitive(item.value)" v-for="(item,ind) in sensitiveCond" :key="ind">
          {{ item.name }}
        </span>
      </div>

      <div class="condition-row" ref="sourceWrap">
        <span class="condition-cell" :class="{ 'selected-cell': selectedSource.indexOf(item.value)!==-1 }" @click="changeSource($event,item.value)" v-for="(item,ind) in newsSource" :key="ind">
          {{ item.name }}
        </span>
      </div>
    </div>

    
	<div class="opinion-no-data" v-if="!totalCount">
		<img src="../assets/nodata.png" />
	</div>
    <van-list
      v-model="ifRequesting"
      :finished="ifFinished"
      finished-text=""
      @load="loadList"
      style="margin-bottom:60px"
	  v-else
    >
		
        <ul class="news-list" >
			<li class="news-cell" v-for="(item,ind) in newsList" @click="gotoDetail(item.id, 'opinion', item.title)" :key="ind">
				<p class="news-title">
					{{ item.title }}
				</p>
				<p class="news-content" v-html="item.summary">
				</p>
				<p class="news-msg">
				<span class="news-tag">
					{{ item.sensitive }}
				</span>
				<span class="news-source">
					{{ item.source }}
				</span>
				<span class="news-time">
					{{ item.published_time }}
				</span>
				</p>
			</li>
		</ul>
    </van-list>
    
  </div>
</template>

<script>
// @ is an alias to /src
import Vue from 'vue';
import { enums } from '@/core/config';
import router from '@/router';
import { getOpinionList, getStatuteBanner } from '@/api/api';
import { mapGetters, mapActions } from 'vuex';
import { Toast } from 'vant';

Vue.use(Toast);
const jumpLoginPage = () => {
  router.push({ name: 'login' })
}

export default {
    name: 'Opinion',
    data() {
        return {
			adImg:'',
			ifRequesting: false,
			ifFinished: false,
            title: '舆情',
            selectedSens: [2],
            selectedSource: [4],
            sensitiveCond: [
              {
                name:'敏感',
                value:2
              },{
                name:'非敏感',
                value:3
              },
            ],
            newsSource: [
              {
                value:4,
                name:'热点媒体'
              },
              {
                value:2,
                name:'微博'
              },
              {
                value:5,
                name:'微信'
              },
              {
                value:8,
                name:'博客'
              },{
                value:3,
                name:'论坛'
              }
            ],
            newsList:[],
            totalCount:999,
            pageObj:{
                pageNum:0,
                pageSize: 15
            }
        }
    },
    created() {
      this.$store.commit('set_top_title',this.title);
    },
    // updated(){},
    activated() {
  
    },
    mounted() {
        // this.getOpinionListData();
        getStatuteBanner().then(res => {
          if(res.code===0){
            for (var i = 0; i < res.data.length-1; i++) {
              if(res.data[i].title=='舆情'){
                this.adImg = res.data[i].img;
                break
              }
            }
          }
        }).catch(err => {
          console.log(err);
        })
    },
    methods: {
        ...mapActions([
          'ac_gotoDetail'
		]),
		loadList(){
			this.ifRequesting = true;
			this.getOpinionListData();
		},
        gotoDetail(id,api_type,title){
          this.ac_gotoDetail({ id, api_type, title });
        },
        changeSensitive(_sens) {
			this.ifFinished = false;
            if(this.selectedSens.indexOf(_sens)>-1){
              this.selectedSens.splice(this.selectedSens.indexOf(_sens),1);
            } else {
              this.selectedSens.push(_sens);
            }
            // this.selectedSens = _sens;
            this.newsList = [];
			this.pageObj.pageNum = 0;
			this.ifRequesting = true;
            this.getOpinionListData();

        },
        changeSource(ev, _source) {
			// console.log(ev.target.offsetLeft);
			this.ifFinished = false;
            if(this.selectedSource.indexOf(_source)>-1){
              this.selectedSource.splice(this.selectedSource.indexOf(_source),1);
            } else {
              this.selectedSource.push(_source);
            }
            this.newsList = [];
            this.$refs.sourceWrap.scrollLeft = ev.target.offsetLeft-84;
			this.pageObj.pageNum = 0;
			this.ifRequesting = true;
            this.getOpinionListData();

        },
        getOpinionListData(){
            // if(!this.selectedSens.length && !this.selectedSource.length){// 都不选时为不获取数据
            //   return
			// }
            if(this.ifRequesting){
                // Toast.loading({
                //   mask: true,
                //   message: '加载中...'
                // });
                this.ifRequesting = true;
                this.pageObj.pageNum++;
                getOpinionList({
                    sensitive_type: this.selectedSens.join(','),
                    api_type: this.selectedSource.join(','),
                    page_num: this.pageObj.pageNum,
                    page_size: this.pageObj.pageSize
                }).then(res =>{
					if(res.code == 0){
						this.totalCount = res.data.total_count;
						this.newsList = this.newsList.concat(res.data.data_list);
						this.ifRequesting = false;
						
						if (this.newsList.length >= this.totalCount) {
							this.ifFinished = true;
						}
					} else {
						this.ifFinished = true;
					}
                }).catch(err => {
						//   console.log(err);
						this.ifFinished = true;
                        this.ifRequesting = false;
                });
            }
          
        }

    }
}
</script>
<style>
red{
  color:#ff0000;
}
#opinion {
  width:100vw;
  height:100vh;
  overflow:auto;
}
.ad-wrap {
  margin: 10px 14px 0;
  /*height:196px;*/
  background-color: #000;
}
.ad-wrap img {
  width:100%;
  /*height: 100%;*/
}

.condition-wrap{
  width:100%;
  margin:17px 0;
  box-sizing: border-box;
  padding:0 14px;
}
.condition-row {
  display: flex;
  word-break: keep-all;
  width: 100%;
  overflow: auto;
  margin-bottom: 12px;
}
.condition-row::-webkit-scrollbar{
  display: none;
}
.condition-cell{
  min-width: 72px;
  height:26px;
  text-align: center;
  background-color: #F4ECDF;
  color:#C3A26D;
  font-size: 13px;
  border-radius: 13px;
  line-height: 27px;
  margin-right:6px;
}
.condition-cell.selected-cell {
  background-color: #D4B686;
  color:#FFFFFF;
}
.news-list {
  width:calc(100% - 14px);
  box-sizing: border-box;
  margin-right: 14px;
  border-top:1px solid #EAEAEA;
}
.news-cell{
  width: calc(100% - 14px);
  padding:17px 3px 20px;
  margin-left:14px;
  box-sizing: border-box;
  border-bottom: 1px solid #EAEAEA;
  text-align: left;
}
.news-cell p{
  line-height: 1em;
  margin:0;
}
.news-cell p.news-title{
  color:#222222;
  font-size: 15px;
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: 7px;
  line-height: 21px;
}
.news-cell p.news-content{
  color:#757679;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: 11px;
  line-height: 18px;
}
.news-cell p.news-msg {
  display: flex;
}
.news-cell p.news-msg .news-tag{
  min-width: 40px;
  height:17px;
  text-align: center;
  background-color: #F4ECDF;
  color:#C3A26D;
  font-size: 12px;
  border-radius: 9px;
  line-height: 17px;
  margin-right: 10px;
}
.news-cell p.news-msg .news-source,.news-cell p.news-msg .news-time{
  color:#BCBCBC;
  font-size: 12px;
}
.news-cell p.news-msg .news-source{
  margin-right: 15px;
}
.opinion-no-data{
  width: 80px;
  margin:50px auto;
}
.opinion-no-data img{
  width: 100%;
}
</style>